<template>
  <view style="width: 100%;">
    <u-input
        :value="inputValue"
        :type="type"
        :height="getHeight"
        :input-align="inputAlign"
        :placeholder="placeholder"
        :placeholder-style="placeholderStyle"
        select-icon="arrow-right"
        @click="handleClick"
    />
    <u-picker :mode="pickerMode" v-model="show" :range="range" :range-key="rangeKey" :params="params" @confirm="confirm"></u-picker>
  </view>
</template>

<script>
export default {
  name: "unSelect",
  data() {
    return {
      show: false,
      inputValue: this.defaultValue
    }
  },
  props: {
    value:{
      type:String
    },
    defaultValue: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'select'
    },
    inputAlign: {
      type: String,
      default: 'left'
    },
    placeholder: {
      type: String,
      default: ''
    },
    placeholderStyle: {
      type: String,
      default: 'color: #c0c4cc;'
    },
    height: {
      type: String
    },
    pickerMode:{
      type:String,
      default:'selector'
    },
    inputKey:{
      type:String,
      default:'name'
    },
    range: {
      type: Array,
      default: []
    },
    rangeKey: {
      type: String,
      default: 'name'
    },
    params:{
      type:Object,
      default:()=>({
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
        province: true,
        city: true,
        area: true,
        timestamp: true
      })
    },
    dateFormat:{
      type:Function,
      default:((dateObj)=>{
        return `${dateObj.year}-${dateObj.month}-${dateObj.day}`
      })
    }
  },
  methods: {
    handleClick(e) {
      this.show = !this.show
    },
    confirm(indexs) {
      let selectName
      if(this.pickerMode === 'time'){
        selectName = this.dateFormat(indexs)
      }else{
        selectName = this.range[indexs[0]][this.inputKey]
      }
      console.log(selectName);
      this.inputValue = selectName
      this.$emit('input',selectName)
    }
  },
  computed: {
    getHeight() {
      if (this.type === 'textarea') {
        if (this.height) {
          return this.height
        }
        return '100'
      }
      if (this.height) {
        return this.height
      }
      return '70'

    }
  }
}
</script>

<style scoped>

</style>
